<template>
  <div class="process-detail">
    <!-- 流程基本信息 -->
    <el-collapse v-model="activeCollapse" accordion>
      <el-collapse-item title="流程基本信息" name="basic">
        <el-descriptions :column="3" border>
          <el-descriptions-item :label="isTaskMode ? '任务名称' : '流程名称'">
            {{ isTaskMode ? displayData?.taskName : displayData?.processName }}
          </el-descriptions-item>
          <el-descriptions-item :label="isTaskMode ? '任务ID' : '流程实例ID'">
            {{ isTaskMode ? displayData?.taskId : displayData?.processInstanceId }}
          </el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(displayData?.status)">
              {{ getStatusText(displayData?.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="isTaskMode ? '处理人' : '发起人'">
            {{ isTaskMode ? displayData?.assignee : displayData?.initiator }}
          </el-descriptions-item>
          <el-descriptions-item :label="isTaskMode ? '创建时间' : '发起时间'">
            {{ isTaskMode ? displayData?.createTime : displayData?.startTime }}
          </el-descriptions-item>
          <el-descriptions-item :label="isTaskMode ? '到期时间' : '当前节点'">
            {{ isTaskMode ? (displayData?.dueDate || '无') : (displayData?.currentNode || '未知') }}
          </el-descriptions-item>
          <el-descriptions-item v-if="isTaskMode" label="任务类型">
            {{ displayData?.taskType }}
          </el-descriptions-item>
          <el-descriptions-item v-if="isTaskMode" label="优先级">
            <el-tag :type="getPriorityType(displayData?.priority)">
              {{ getPriorityText(displayData?.priority) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item v-if="isTaskMode" label="任务描述" :span="2">
            {{ displayData?.description || '暂无描述' }}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>

      <!-- 节点状态 -->
      <el-collapse-item title="节点状态" name="status">
        <NodeStatus 
          :key="`status-${displayData?.processInstanceId || displayData?.id || Date.now()}`"
          :process-data="displayData"
          :node-status-list="nodeStatusList"
          :process-instance-id="displayData?.processInstanceId || displayData?.id"
          @node-detail="handleNodeDetail"
        />
      </el-collapse-item>

      <!-- 审批记录 -->
      <el-collapse-item title="审批记录" name="history">
        <ApprovalHistory 
          :key="`history-${displayData?.processInstanceId || displayData?.id || Date.now()}`"
          :process-data="displayData"
          :approval-history="approvalHistory"
          :process-instance-id="displayData?.processInstanceId || displayData?.id"
        />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import NodeStatus from './NodeStatus.vue'
import ApprovalHistory from './ApprovalHistory.vue'

const props = defineProps({
  displayData: {
    type: Object,
    default: null
  },
  nodeStatusList: {
    type: Array,
    default: () => []
  },
  approvalHistory: {
    type: Array,
    default: () => []
  },
  mode: {
    type: String,
    default: 'view'
  }
})

const emit = defineEmits(['node-detail'])

const activeCollapse = ref(['basic'])

// 计算属性
const isTaskMode = computed(() => props.mode === 'task')

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'RUNNING': 'primary',
    'COMPLETED': 'success',
    'CANCELLED': 'danger',
    'SUSPENDED': 'warning'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'RUNNING': '进行中',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消',
    'SUSPENDED': '已暂停'
  }
  return statusMap[status] || status
}

// 获取优先级类型
const getPriorityType = (priority) => {
  const priorityMap = {
    'HIGH': 'danger',
    'MEDIUM': 'warning',
    'LOW': 'info'
  }
  return priorityMap[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority) => {
  const priorityMap = {
    'HIGH': '高',
    'MEDIUM': '中',
    'LOW': '低'
  }
  return priorityMap[priority] || priority
}

// 处理节点详情
const handleNodeDetail = (nodeData) => {
  emit('node-detail', nodeData)
}
</script>

<style scoped>
.process-detail {
  padding: 20px 0;
}
</style>